<script setup lang="ts">
import { ref } from 'vue'
import KnowledgeCard from './knowledge-card.vue'
// 1:只完成第一页加载 （定义api导入调用存储数据并渲染）
import { patientHomeKnowledge } from '@/api/home'
import type { patientHomeKnowledgeApiRows, patientHomeKnowledgeReqType } from '@/types/home'
const props = defineProps<{
  type: patientHomeKnowledgeReqType
}>()
const list = ref<patientHomeKnowledgeApiRows[]>([])
const loading = ref(false)
const finished = ref(false)
let page = 1
const getData = async () => {
  const res = await patientHomeKnowledge({
    type: props.type,
    current: page,
    pageSize: 10
  })
  // v-model:loading的值改成false
  loading.value = false
  // 数据累加
  list.value.push(...res.data.rows)
  // 页码++
  page++
  // 判断是否加载完成
  if (list.value.length >= res.data.total) {
    finished.value = true
  }
  console.log('列表', res)
}
// getData()
</script>

<template>
  <div class="knowledge-list">
    <!-- 
      v-model:loading :是否处于加载中
      finished:是否加载完成
      finished-text:加载完成后的文本显示
      @load="滚动条距离底部小于300时自动触发"
         load:()=>{
             调用接口
             调用完成
                 v-model:loading的值要改成false
                 数据要累加
                 页码++
                 判断是否加载完成，如果完成 finished=true
         }
     -->
    <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="getData"
    >
      <knowledge-card v-for="i in list" :key="i.id" :item="i"></knowledge-card>
    </van-list>
  </div>
</template>

<style lang="scss" scoped>
.knowledge-list {
  padding: 0 15px;
}
</style>
